<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <el-page-header @back="goBack" :content="$route.name" class="mb10"></el-page-header>
        <!-- <div class="search">
            <el-form ref="form" :model="integralSearch" :inline="true" size="mini">
                <el-form-item label="活动名称：">
                    <el-input v-model="integralSearch.name" clearable placeholder="请输入活动名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick">查 询</el-button>
                </el-form-item>
            </el-form>
        </div> -->
        <!-- <div class="btn">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div> -->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="integralTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <!-- <el-table-column type="index" label="序号" width="80px"></el-table-column> -->
                <el-table-column label="ID" width="60px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属用户" width="160px">
                    <!-- <template slot-scope="scope"> -->
                        <span>{{ row.user_name }}</span>
                    <!-- </template> -->
                </el-table-column>
                <el-table-column label="积分类型" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type | filtype}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分数" width="130px">
                    <template slot-scope="scope">
                        <span>{{scope.row.number}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="获取时间" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate}} {{ scope.row.create_time*1000 | formatDateBehind}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="失效时间" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.end_time*1000 | formatDate}} {{ scope.row.end_time*1000 | formatDateBehind}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="积分状态" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.state | filstate }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            size="small"
                            type="danger"
                            @click="remove(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate } from '../../util/time.js';
export default {
    data() {
        return {
            // 分页
            row:'',
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            dialogVisible: false, //放大图片的对话框显示
            dialogImageUrl: "", //放大图片的路径
            integralSearch: {
                //搜索
                coupon_name: "", //优惠券名称
                merchantNumber: "", //商户号
                name: "" //活动名称
            },
            integralupdate: {
                type: "",
            },
            integralTable: [],
            typename:[
                {id:0,name:"用户注册"},
                {id:1,name:"添加车辆"},
                {id:2,name:"首次洗车"},
                {id:3,name:"充值或买次数"},
            ]
        };
    },
    filters:{
        // 增减
        filtype(sou){
            if(sou === 0){
                sou = "增加"
            }else if(sou === 1){
                sou = "减少"
            }else{return}
            return sou
        },
        // // 失效
        filstate(sou){
            if(sou === 0){
                sou = "失效"
            }else if(sou === 1){
                sou = "正常"
            }else{return}
            return sou
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        goBack: function() {
            // 页头的返回
            this.$router.go(-1);
        },
        searchClick() {
            // 查询
            utils.request("/integralDetails/list","post",JSON.stringify({page:this.currentPage,list_rows:this.currentCount,user_id:this.row.id})).then(resp=>{
                console.log(resp)
                this.integralTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
            })
        },
        // add() {
        //     // 添加广告活动
        //     this.$router.push("/addCampaign");
        // },
        // // 开关事件 切换开启
        // shelfswitch(row){
        //     utils.request("/integralRule/update","post",JSON.stringify({id:row.id,state:row.state})).then(resp=>{console.log(resp)})
        // },
        // //监听handleCommand触发，重新对齐默认值重新赋值，return返回新的值
        // beforeHandleCommand(index,row,command){
        //     return {
        //         'index': index,
        //         'row': row,
        //         'command':command
        //     }
        // },
        // // 下拉框事件command默认值被监听修改，添加了循环对象的下标和内容
        // handleCommand(command) {
        //     console.log(command)
        //     this.$confirm('此操作将修改规则类型, 是否继续?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         utils.request("/integralRule/update","post",JSON.stringify({id:command.row.id,type:command.command})).then(resp=>{
        //             console.log(resp)
        //             this.$message({
        //             type: 'success',
        //             message: '修改成功!'
        //             });
        //             this.integralTable[command.index].type = command.command;
        //         })
        //     }).catch(() => {
        //         this.$message({
        //         type: 'info',
        //         message: '已取消修改'
        //         });          
        //     });
        // },
        // remove(index, row) {
        //     // 删除
        // },
        // //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick()
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick()
        }
    },
    created() {
        this.row = JSON.parse(this.$route.query.row)
        this.searchClick()
    }
};
</script>
